import React, { Component } from 'react';
import { Modal, Form, Input, Radio, InputNumber, Cascader, Select, AutoComplete } from 'antd';



const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;
const options = [];

class CustomizedForm extends Component{
    state = {
        autoCompleteResult: [],
    };
    constructor(props){
        super(props);
    }

    render(){
        const { visible, onCancel, onCreate, form, okText, title } = this.props;
        const { getFieldDecorator } = form;
        const { autoCompleteResult } = this.state;
        const FormItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
        };
        const websiteOptions = autoCompleteResult.map(website => (
            <AutoCompleteOption key={website}>{website}</AutoCompleteOption>
        ));
        return (
            <Modal
                visible={visible}
                title={title}
                okText={okText}
                onCancel={onCancel}
                onOk={onCreate}
            >
                <Form layout="horizontal">
                    <FormItem label="商品名称" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('title', {
                            rules: [{ required: true, message: '请输入商品名称！' }],
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem label="库存" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('inventory', {
                            rules: [{ required: true, message: '请输入库存！' }],
                        })(
                            <Input />
                        )}
                    </FormItem>

                    <FormItem label="价格" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('price', {
                            rules: [{ required: true, message: '请输入价格！' }],
                        })(
                            <InputNumber min={0} max={99999} step={1} />
                        )}
                    </FormItem>

                    <FormItem label="是否包邮" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('isFreeShipping', {
                            rules: [{ required: true, message: '请选择是否包邮！' }],
                        })(
                            <Radio.Group style={{marginRight: 20}}>
                                <Radio value='是'>是</Radio>
                                <Radio value='否'>否</Radio>
                            </Radio.Group>
                        )}
                    </FormItem><FormItem label="是否热卖" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('isHot', {
                            rules: [{ required: true, message: '请选择是否热卖！' }],
                        })(
                            <Radio.Group style={{marginRight: 20}}>
                                <Radio value='是'>是</Radio>
                                <Radio value='否'>否</Radio>
                            </Radio.Group>
                        )}
                    </FormItem>
                    <FormItem label="商品简介" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('description', {
                            rules: [{ required: true, message: '请输入商品简介！' }],
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem label="图片链接" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('imgUrl', {
                            rules: [{ required: true, message: '请输入图片链接！' }],
                        })(
                            <Input />
                        )}
                    </FormItem>

                </Form>
            </Modal>
        );
    }
}

const CollectionCreateForm = Form.create()(CustomizedForm);
export default CollectionCreateForm;
